<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-08 10:46:49
 * @Description  : 安全设置
-->
<template>
  <div class="safe-settings">
    <div class="header flex items-center">
      <left-line></left-line>
      <div class="title text-[16px]">账号及登录安全</div>
    </div>
    <n-divider class="!my-2" />

    <n-form
      ref="formRef"
      :label-width="200"
      :label-placement="menuShow ? 'left' : 'top'"
      label-align="left"
      :model="settings"
      size="small"
      require-mark-placement="left"
    >
      <n-form-item label="密码输入错误锁定：" path="pwdLock">
        <n-switch
          :value="settings.pwdLock === '1'"
          @update:value="
            (value: boolean) => handleChange('pwdLock', '' + +value)
          "
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          连续5次密码错误将锁定账号
        </div>
      </n-form-item>
      <!-- <n-form-item label="登录验证码开启：" path="loginValidateCode">
        <n-switch
          :value="settings.loginValidateCode === '1'"
          @update:value="
            (value: boolean) => handleChange('loginValidateCode', '' + +value)
          "
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          登录时需要输入验证码
        </div>
      </n-form-item>
      <n-form-item label="登录短信验证码开启：" path="msgValidateCode">
        <n-switch
          :value="settings.msgValidateCode === '1'"
          @update:value="
            (value: boolean) => handleChange('msgValidateCode', '' + +value)
          "
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          登录时需要邮箱或者手机验证码
        </div>
      </n-form-item> -->
      <n-form-item label="用户密码强度设置：" path="pwdLevel">
        <n-radio-group
          :value="settings.pwdLevel"
          name="radiobuttongroup1"
          @update:value="
            (value: string) => handleChange('pwdLevel', '' + value)
          "
        >
          <n-radio-button
            v-for="level in pwdLevelArr"
            :key="level.value"
            :value="level.value"
            :label="level.label"
          />
        </n-radio-group>
        <div
          class="ml-[12px] text-gray-400 text-[12px]"
          v-show="settings.pwdLevel === '1'"
        >
          由数字、字母组成，6-20位
        </div>
        <div
          class="ml-[12px] text-gray-400 text-[12px]"
          v-show="settings.pwdLevel === '2'"
        >
          由数字、大写字母、小写组成，6-20位
        </div>
      </n-form-item>

      <div class="header flex items-center">
        <left-line></left-line>
        <div class="title text-[16px]">文件访问安全</div>
      </div>
      <n-divider class="!my-2" />

      <n-form-item label="文件外链展示：" path="isLinkShow">
        <n-switch
          :value="settings.isLinkShow === '1'"
          @update:value="
            (value: boolean) => handleChange('isLinkShow', '' + +value)
          "
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">文件属性展示外链</div>
      </n-form-item>
      <n-form-item label="文件md5展示：" path="sourceMd5Show">
        <n-switch
          :value="settings.sourceMd5Show === '1'"
          @update:value="
            (value: boolean) => handleChange('sourceMd5Show', '' + +value)
          "
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">文件属性展示md5</div>
      </n-form-item>

      <n-divider class="!my-2" />
      <n-form-item label="启用外链分享" path="isLink">
        <n-switch
          :value="settings.isLink === '1'"
          @update:value="
            (value: boolean) => handleChange('isLink', '' + +value)
          "
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          关闭后，不在支持外链分享，已经分享的不受影响
        </div>
      </n-form-item>
      <MyTransition>
        <div v-if="settings.isLink === '1'">
          <n-form-item
            label="外链分享允许密码为空："
            path="isLinkPwdAllowEmpty"
          >
            <n-switch
              :value="settings.isLinkPwdAllowEmpty === '1'"
              @update:value="
                (value: boolean) =>
                  handleChange('isLinkPwdAllowEmpty', '' + +value)
              "
            />
            <div class="ml-[12px] text-gray-400 text-[12px]">
              关闭后，外链分享必须设置密码，已经分享的不受影响
            </div>
          </n-form-item>
          <n-form-item
            label="外链分享允许未登录用户访问："
            path="isLinkAllowNotLogin"
          >
            <n-switch
              :value="settings.isLinkAllowNotLogin === '1'"
              @update:value="
                (value: boolean) =>
                  handleChange('isLinkAllowNotLogin', '' + +value)
              "
            />
            <div class="ml-[12px] text-gray-400 text-[12px]">
              关闭后，访问外链时必须已经登录，已经分享的不受影响
            </div>
          </n-form-item>
          <n-form-item label="外链分享打包下载：" path="isLinkPackDownload">
            <n-switch
              :value="settings.isLinkPackDownload === '1'"
              @update:value="
                (value: boolean) =>
                  handleChange('isLinkPackDownload', '' + +value)
              "
            />
            <div class="ml-[12px] text-gray-400 text-[12px]">
              开启后，外链文件打成压缩包后下载
            </div>
          </n-form-item>
        </div>
      </MyTransition>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { IndexObj } from '@/types/commom'

defineProps<{
  settings: IndexObj
  menuShow: boolean
}>()

const emits = defineEmits<{
  (e: 'changeSettings', key: string, value: string): void
}>()

const formRef = ref<FormInst | null>(null)

const handleChange = (key: string, value: string) => {
  emits('changeSettings', key, value)
}

const pwdLevelArr = ref([
  { label: '无限制', value: '0' },
  { label: '中等强度', value: '1' },
  { label: '高强度', value: '2' }
])
</script>

<style scoped lang="scss"></style>
